<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<style>
		#panel1{
			border:1px #000000 solid;
			display:-webkit-box;
			-webkit-box-pack:center;
			-webkit-box-align:center;
			vertical-align:middle;
			font-size:100px;
			width:400px;
			height:400px;			
		}
	</style>
	<script>
		/*
			Step #5
				- 초기 시작시 랜덤숫자 만들기는 정지된 상태.
				- 시작 버튼 클릭시 랜덤하게 숫자가 출력되도록 만들기.
			
			
			Step #4
				- step #1에서 만든 숫자를 레이아웃에 출력하기.("숫자가 출력될 영역"Element를 구해야겠죠?)
			
			
			Step #3
				- 레이아웃 구성하기(숫자가 출력될 영역, 시작버튼, 당첨버튼등이 있어야 겠죠?)
			
			Step #2-1
				- 리팩토링 
				
			Step #2
				- 0.1초에 한번씩 Random 하게 1부터 100사이의 정수 만들기.(setInterval을 이용하세요)
			
			Step #1
				- Random하게 1부터 100사이의 정수 만들기.
		*/
		
		var panel1;
		var nTimerID;
		window.onload=function(){		
			this.init();
			this.initEventListener();	
		}
		
		function init(){
			// 숫자가 출력될 #panel1을 찾아 전역변수에 담아둡니다.
			this.panel1 = document.getElementById("panel1");
			this.nTimerID = 0;
		}
		
		// 이벤트 초기화.
		function initEventListener(){
			var btnStart = document.getElementById("btn_start");
			btnStart.addEventListener("click", function(){
				startTimer();
			}, false);
			
			var btnStop	= document.getElementById("btn_stop");
			btnStop.addEventListener("click", function(){
				stopTimer();
			},false);		
		}
		
		// 0.2초에 한번씩 createNumber()함수를 실행시켜 줍니다.
		function startTimer(){
			if(this.nTimerID==0)
				this.nTimerID=setInterval(this.createNumber,20);	
		}
		
		// createNumber()함수 호출하는 타이머를 멈춥니다.
		function stopTimer(){
			if(this.nTimerID){
				clearInterval(this.nTimerID);
				this.nTimerID=0;
			}
		}
		// 랜덤하게 1~100 숫자를 만들어 냅니다.
		function createNumber(){		
			var nNum = 1+Math.floor(Math.random()*100);
			//만들어진 숫자를 innerHTML에 대입시켜 줍니다.
			this.panel1.innerHTML =nNum;
		}	
	</script>
</head>

<body>
	<div> 
		<h4>경품추첨기-ver 0.1</h4>
		<div id="panel1" > 	
		</div>	
		<div id="nav">
			참여인원 : <input type="text" id="lab_total" value="100"></input>
			<button id="btn_start">시작</button>
			<button id="btn_stop">멈춤</button>
		</div>
	</div>
</body>
</html>
